<template>
  <div class="questionsPage">
    <van-nav-bar fixed placeholder :title="title" right-text="我要提问" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    <div class="questionsPage_box">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedText" @load="onLoad">
          <div class="questionsPage_box_item" v-for="(item, index) in questionsList" :key="index">
            <div class="questionsPage_box_item_top">
              <div class="questionsPage_box_item_top_img">
                <img v-if="item.user.avatar" :src="item.user.avatar" alt="">
                <img v-else src="../../assets/img/avatar1.png" alt="">
              </div>
              <div class="questionsPage_box_item_top_name">{{ item.user.trueName }}</div>
              <div class="questionsPage_box_item_top_time">{{ item.createTime }} 发布</div>
            </div>
            <div class="questionsPage_box_item_quwetion">
              <img src="../../assets/img/quwetion.png" alt="">
              <div class="questionsPage_box_item_quwetion_content">{{ item.question }}</div>
            </div>
            <div class="questionsPage_box_item_answer">
              <img src="../../assets/img/answer.png" alt="">
              <div class="questionsPage_box_item_answer_content">{{ item.answer ? item.answer : '暂未回复' }}</div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>

      <van-empty v-if="questionsList.length == 0" image-size="3rem" description="暂无问答内容" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getQuestionsListAPI } from '@/api/common'
import { getToken } from '@/utils/auth'
import { showConfirmDialog } from 'vant';

const router = useRouter()
const title = ref(router.currentRoute.value.query.title)

const finishedText = ref('没有更多了')
const questionsList = ref([])
const loading = ref(false)      // 是否处于加载状态
const finished = ref(false)     // 是否已加载完毕
const refreshing = ref(false)   // 是否处于下拉刷新状态
const pageNum = ref(1)
const pageSize = ref(10)

// 获取问答列表
const onLoad = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value
  }
  let data = {
    type: router.currentRoute.value.query.type,
    attributeId: router.currentRoute.value.query.attributeId
  }
  console.log('获取问答列表参数', data)
  await getQuestionsListAPI(params, data).then(res => {
    console.log('获取问答列表', res)
    questionsList.value = questionsList.value.concat(res.rows)
    pageNum.value++

    if (res.total <= questionsList.value.length) {
      finished.value = true
    } else {
      finished.value = false
    }
    if (res.total == 0) {
      finishedText.value = ''
    }
  }).catch(err => {
    console.log(err)
    finished.value = true
  }).finally(() => {
    loading.value = false
    refreshing.value = false
  })
}

// 下拉刷新
const onRefresh = () => {
  pageNum.value = 1
  questionsList.value = []

  finished.value = false
  loading.value = true
  onLoad()
}

// 我要提问
const onClickRight = () => {
  if (!getToken()) {
    showLogin()
    return
  }
  router.push({
    path: '/sendQuestions',
    query: {
      type: router.currentRoute.value.query.type,
      attributeId: router.currentRoute.value.query.attributeId,
      title: title.value,
      dynamicKeepAlive: 0
    }
  })
}

// 提示用户登录
const showLogin = () => {
  showConfirmDialog({
    title: '提示',
    message: '您未登录账号，请先登录'
  }).then(() => {
    router.push({
      path: '/login',
      query: {
        dynamicKeepAlive: 0
      }
    })
  }).catch(() => {
    // on cancel
  })
}


// 返回上一页
const onClickLeft = () => {
  router.back()
}

</script>

<style lang="scss" scoped>
.questionsPage {
  &_box {
    padding: 0 .2667rem;

    &_item {
      display: flex;
      flex-direction: column;
      padding: .4rem 0;
      border-bottom: 1px solid #f3f3f3;

      &_top {
        display: flex;
        align-items: center;

        &_img {
          width: .8rem;
          height: .8rem;
          border-radius: 50%;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        &_name {
          margin-left: .2667rem;
          font-size: .3733rem;
          color: #333;
        }

        &_time {
          margin-left: auto;
          font-size: .32rem;
          color: #999;
        }
      }

      &_quwetion {
        margin-top: .2667rem;
        display: flex;
        align-items: center;

        img {
          width: .5333rem;
          height: .5333rem;
        }

        &_content {
          margin-left: .2667rem;
          font-size: .3733rem;
          line-height: 1.5;
          color: #333;
        }
      }

      &_answer {
        margin-top: .2667rem;
        display: flex;
        align-items: center;

        img {
          width: .5333rem;
          height: .5333rem;
        }

        &_content {
          margin-left: 10px;
          font-size: 14px;
          line-height: 1.5;
          color: #666;
        }
      }
    }
  }
}
</style>